<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style lang="scss">
      p::first-letter {
        font-size: 30px;
        color: red;
      }
      p::first-line {
        font-size: 20px;
        color: rgb(235, 27, 0);
      }
      p::first-word {
        font-size: 20px;
        color: blue;
      }
      p::selection {
        background-color: yellow;
        color: #f10606;
      }
      p::after {
        content: "这是伪元素";
        color: red;
      }
      p::before {
        content: "这是伪元素";
        color: red;
      }
      p::backdrop {
        background-color: red;
      }

    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos id velit
      obcaecati nisi quam, maxime voluptatum voluptate corporis atque accusamus
      rem delectus temporibus voluptas iusto, eveniet adipisci commodi saepe
      recusandae? Beatae, necessitatibus repellat rerum ducimus omnis molestiae
      corporis qui illum odio nostrum, consectetur reprehenderit quisquam atque
      delectus saepe iusto debitis sunt? Quidem molestiae, quos ea, est porro
      provident ipsam cumque dolore nesciunt, odio ipsum cupiditate voluptatum
      nihil deleniti aperiam! Cumque tempora, quo deleniti harum accusantium
      sit, inventore aliquid reprehenderit nulla cupiditate eius reiciendis,
      nemo quas saepe asperiores quam ipsam repellendus quasi a repudiandae
      alias itaque! At illum tempora ex dignissimos.
    </p>
    <p>
      Cumque accusantium ex, labore error facere ipsa nobis fugit est veniam
      neque eligendi totam unde consectetur cum odio eveniet quam quo possimus
      dolore quibusdam, delectus qui dolorum ducimus. Debitis libero velit optio
      harum obcaecati illum facere voluptatum sint facilis. Suscipit doloremque,
      minima sint reiciendis eveniet possimus nostrum atque labore debitis iure
      ad recusandae excepturi vel itaque dicta illo consequatur corporis! Autem
      nam eveniet amet dolor! Quaerat cumque perspiciatis aut autem ipsum
      consequatur beatae impedit dolorem suscipit harum. Nihil totam explicabo
      quisquam necessitatibus deleniti doloremque laboriosam reiciendis aliquam
      voluptatibus, voluptatum quis perspiciatis ea sequi dolores. Nihil fugit
      perferendis molestiae sit provident?
    </p>
    <p>
      Maiores, velit quos, ut saepe recusandae laboriosam accusantium mollitia
      magnam explicabo ipsa at voluptates nisi ex corrupti deleniti itaque omnis
      perferendis, aliquid voluptate sapiente. Nulla accusamus eveniet animi
      iure enim, dolore nostrum, tempore similique reiciendis odio id soluta
      adipisci, esse inventore odit. At iste cupiditate provident illum,
      necessitatibus quis ipsa ullam, eveniet commodi atque voluptatum, quae
      libero itaque dicta quidem voluptate dolores esse nostrum vero sit! Ipsam,
      omnis dolorem possimus odio commodi esse ab. Aut sint eius facere
      explicabo repellat, dolores perferendis eveniet eum maiores corporis ut
      nam obcaecati omnis mollitia consequuntur sequi porro quaerat
      necessitatibus illo iure non! Voluptates.
    </p>
    <p>
      Adipisci quisquam, dicta impedit corporis suscipit a accusantium fuga,
      sunt exercitationem consequatur modi doloremque quod sapiente ut maiores
      repudiandae, ducimus reiciendis fugit tempore eaque aliquid quae
      repellendus! Nesciunt quidem at facere vero voluptatem minus. Debitis quas
      eum, tenetur neque repellendus dolor, consequatur esse quae, a quisquam
      hic id. Porro ad consectetur voluptatibus asperiores natus. Cupiditate
      vitae voluptatum molestias a suscipit illum officia, assumenda dicta sunt
      non error pariatur velit exercitationem alias laudantium quos fuga magni!
      Dignissimos accusantium quos, autem eum dolorum dolorem earum et. Animi
      culpa odio ex excepturi nemo tenetur quos adipisci. Tenetur, veniam quo.
      Laborum sint laudantium amet?
    </p>
    <p>
      Vero voluptate porro sapiente labore esse, doloremque est tenetur
      excepturi dignissimos similique id facere accusamus, ea ullam nesciunt et?
      Consequatur dolorum corrupti quibusdam dolores ad. Illum odio consequatur,
      qui possimus ex accusantium alias quod perferendis cum, asperiores odit
      incidunt! Atque velit recusandae voluptate mollitia nisi odit! Aspernatur
      ad quam sint voluptatem, ullam tenetur asperiores natus ex. Eligendi,
      mollitia nesciunt soluta, eius dolor eum labore necessitatibus ipsum iure
      sapiente possimus tenetur perferendis eaque nisi magnam unde dolore quod
      voluptatibus! Est labore neque beatae, assumenda, earum fugiat obcaecati
      officia quibusdam vel ut facilis ab tenetur eius sit enim ducimus odit
      magni sed.
    </p>
  </body>
</html>
